<template>


    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计处理</el-breadcrumb-item>
            <el-breadcrumb-item>维修厂收入统计</el-breadcrumb-item>
        </el-breadcrumb>
        <h1 align="center">收入统计</h1>

        <div id="search" style="width: 200px;height: 100px">
            <el-form>
                <el-row>
                    <el-col :spna="12">
                        <el-form-item label="请选择月份" size="mini" style="width: 200px">
                            <el-input
                                    v-model="startDate"
                                    format="yyyy-MM"
                                    type="month"
                                    placeholder="请选择月份"
                                    :picker-options="pickerOptions1"
                                    @change="myEcharts">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div id="main" style="width: 800px;height:500px;"></div>
    </div>

</template>

<script>

    export default {

        name: "TJOrder",
        created() {
            //根据token获取用户的信息
            setTimeout( ()=>{ //延时加载echarts初始化函数
                this.myEcharts()
            },100)
        },

        data(){
            return{
                startDate:'2020-11',
                pickerOptions1:'',
            }
        },
        methods:{
            myEcharts(){

                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main'));
                var chardate;
                this.$http.post(`/statistics/order/selectOrder/${this.startDate}`).then(function (response) {
                    // console.log(response)
                    chardate=response.data.result.chardata
                    // console.log(chardate)

                    // 指定图表的配置项和数据

                    var option = {

                        xAxis: {
                            type: 'category',
                            data:chardate.datax,
                        },
                        yAxis: {
                            type: 'value',
                            position: 'left',
                            axisLine: {
                                show: true,
                            },
                            axisLabel: {
                                formatter: '{value} 元'
                            },
                        },

                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    xAxisIndex: 'none'
                                },

                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },

                        series: [{
                            data: chardate.price,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'},
                                    [{
                                        x: '90%',
                                        yAxis: 'max'
                                    }, {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: '最大值'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }]
                                ]
                            }


                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }}
    }

</script>

<style scoped>

</style>